import React from 'react'
import Home from './views/Home'
import Comment from './views/Comment'
import Search from './views/Search'
import { Link, Route, Switch, NavLink } from 'react-router-dom'
import NotFound from './views/NotFound'
import List from './views/List'
import Goods from './views/Goods'

export default function App() {
  return (
    <div>
      <h2>App</h2>
      {/* 使用 a标签需要使用 # 号 */}
      {/* <a href="#/">home</a>
      <a href="#/Comment">Comment</a>
      <a href="#/Search">Search</a> */}

      {/* <Link to="/">home</Link><br />
      <Link to="/comment">comment</Link><br />
      <Link to="/search">search</Link><br /> */}

      {/* 与Link组件的组别 就是会在导航链接激活时, 添加高亮类名
        也是模糊匹配, 如果希望高亮类名是在精确匹配才添加  exact
      */}
      <NavLink to="/" exact activeClassName="light">
        home
      </NavLink>
      <br />
      <NavLink to="/comment" activeClassName="light">
        comment
      </NavLink>
      <br />
      <NavLink to="/search" activeClassName="light">
        search
      </NavLink>
      <br />
      <NavLink to="/list" activeClassName="light">
        list
      </NavLink>
      <br />
      <hr />
      {/* 提供路由规则的同时, 指定了路由出口 相当于router
      -view, exact这个是精准匹配模糊, path必须和当前路径完成相同才会展示 */}
      {/* 
        注意点: 如果路径需要精确展示 需要加exact;
                如果 没有path属性 100%匹配成功 (Search组件)

        - 如果 path 值与浏览器路径相匹配，就渲染 component 或标签体指定的组件
        - 如果 path 没匹配上，那么什么都不渲染
        - 如果 path 没有指定，那总是渲染 component 或标签体指定的组件
        - 注意：默认情况下，任何页面路径都会被 path="/"的 Route 匹配到

      */}
      <Switch>
        {/* 默认路由一直匹配下去， 默认匹配成功几个 就展示几个了switch组件可以保证展示第一个匹配成功的结构 （可以实现404的错误页面） */}
        <Route path="/" component={Home} exact></Route>
        <Route path="/comment" component={Comment}></Route>
        <Route path="/search" component={Search}></Route>

        {/* <Route path="/search">
          <Search></Search>
        </Route> */}

        {/* <List history={object}></List> */}
        <Route path="/list" component={List}></Route>

        {/* 动态路由  */}
        <Route path="/goods/:id" component={Goods}></Route>

        <Route component={NotFound}></Route>
      </Switch>
    </div>
  )
}
